<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.user_name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.tel_number" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">省市区</text>
			<picker mode="region" class="input" :value="region" @change="regionChange">
				<text class="placeholder-text" v-if="region.length===0">
					选择省市区
				</text>
				<text v-else>{{region.join(' ')}}</text>
			</picker>
			<text class="yticon icon-shouhuodizhi"></text>
		</view>
		<view class="row b-b"> 
			<text class="tit">地址</text>
			<input class="input" type="text" v-model="addressData.detail_info" placeholder="填写详细地址" placeholder-class="placeholder" />
		</view>
		
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.is_default" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
	import {mergeObj} from '@/common/common.js'
	export default {
		data() {
			return {
				addressData: {
					address_id:'',
					user_name: '',
					tel_number: '',
					province_name:'',
					city_name:'',
					county_name:'',
					postal_code:'',
					detail_info: '',
					is_default: false
				},
				region:[]
			}
		},
		// computed:{
		// 	region
		// },
		onLoad(option){
			let title = '新增收货地址';
			if(option.type==='edit'){
				title = '编辑收货地址'
				let addressData = JSON.parse(option.address)
				console.log(addressData)
				this.addressData={
					address_id:addressData.address_id,
					user_name: addressData.receive_name,
					tel_number: addressData.receive_phone,
					province_name:addressData.province_name,
					city_name:addressData.city_name,
					county_name:addressData.area_name,
					postal_code:addressData.postal_code,
					detail_info: addressData.address_detail,
					is_default: !!addressData.is_default
				}
				this.region=[addressData.province_name,addressData.city_name,addressData.area_name]
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			switchChange(e){
				console.log(e)
				this.addressData.is_default = e.detail.value
			},
			//地图选择地址
			regionChange(e){
				console.log(e)
				this.region=e.detail.value
			},
			//提交
			confirm(){
				let data = this.addressData;
				if(!data.user_name){
					uni.showToast({icon:'none',title:'请填写收货人姓名'});
					return;
				}
				if(!/(^1[0-9]{10}$)/.test(data.tel_number)){
					uni.showToast({icon:'none',title:'请输入正确的手机号'});
					return;
				}
				if(this.region.length===0){
					uni.showToast({icon:'none',title:'请选择省市区'});
					return;
				}
				if(!data.detail_info){
					uni.showToast({icon:'none',title:'请填写门牌号信息'});
					return;
				}
				this.addressData.province_name=this.region[0]
				this.addressData.city_name=this.region[1]
				this.addressData.county_name=this.region[2]
				this.postAddress(this.addressData)
			},
			async postAddress(data){
				await this.$api[this.manageType=='edit'?'editAdress':'addAdress']({
					...data,
					is_default:data.is_default?1:0,
				})
				uni.showToast({
					icon:'success',
					title:`地址${this.manageType=='edit' ? '修改': '新增'}成功`,
					mask:true
				})
				setTimeout(()=>{
					uni.$emit('refreshAddressList')
					uni.navigateBack()
				}, 800)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
		padding-top: 16rpx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30rpx;
		height: 110rpx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 120rpx;
			font-size: 30rpx;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
		}
		.icon-shouhuodizhi{
			font-size: 36rpx;
			color: #999;
		}
	}
	.default-row{
		margin-top: 16rpx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16rpx) scale(.9);
		}
	}
	.placeholder-text{
		color:#999;
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		font-size: 36rpx;
		color: #fff;
		background-color: #E7404A;
		border-radius: 10rpx;
		box-shadow: 1rpx 2rpx 5rpx rgba(219, 63, 96, 0.4);
	}
</style>
